<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>2021前端vue面试题 | 不眠</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/blog_front/favicon.ico">
    <meta name="description" content="生活不仅需要氧气，更需要勇气">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/blog_front/assets/css/0.styles.d5cfe64c.css" as="style"><link rel="preload" href="/blog_front/assets/js/app.f126fdc6.js" as="script"><link rel="preload" href="/blog_front/assets/js/3.ba154db2.js" as="script"><link rel="preload" href="/blog_front/assets/js/1.1f0d1f23.js" as="script"><link rel="preload" href="/blog_front/assets/js/22.86e9d97f.js" as="script"><link rel="prefetch" href="/blog_front/assets/js/10.74d752e5.js"><link rel="prefetch" href="/blog_front/assets/js/11.72f1afb7.js"><link rel="prefetch" href="/blog_front/assets/js/12.6042b8d4.js"><link rel="prefetch" href="/blog_front/assets/js/13.9684c154.js"><link rel="prefetch" href="/blog_front/assets/js/14.8b576294.js"><link rel="prefetch" href="/blog_front/assets/js/15.56073655.js"><link rel="prefetch" href="/blog_front/assets/js/16.d74732b4.js"><link rel="prefetch" href="/blog_front/assets/js/17.e3f1e2ad.js"><link rel="prefetch" href="/blog_front/assets/js/18.e832171e.js"><link rel="prefetch" href="/blog_front/assets/js/19.43a851da.js"><link rel="prefetch" href="/blog_front/assets/js/20.642c04d2.js"><link rel="prefetch" href="/blog_front/assets/js/21.00678a6a.js"><link rel="prefetch" href="/blog_front/assets/js/23.1578bd4e.js"><link rel="prefetch" href="/blog_front/assets/js/24.502ecba6.js"><link rel="prefetch" href="/blog_front/assets/js/25.fe7bb1b9.js"><link rel="prefetch" href="/blog_front/assets/js/26.f26725d4.js"><link rel="prefetch" href="/blog_front/assets/js/27.77a63ec4.js"><link rel="prefetch" href="/blog_front/assets/js/28.4536f711.js"><link rel="prefetch" href="/blog_front/assets/js/29.2a39afd8.js"><link rel="prefetch" href="/blog_front/assets/js/4.c0f4c928.js"><link rel="prefetch" href="/blog_front/assets/js/5.a69dfd84.js"><link rel="prefetch" href="/blog_front/assets/js/6.2d4b5bad.js"><link rel="prefetch" href="/blog_front/assets/js/7.728ad095.js"><link rel="prefetch" href="/blog_front/assets/js/8.17b33111.js"><link rel="prefetch" href="/blog_front/assets/js/9.40ab41ce.js">
    <link rel="stylesheet" href="/blog_front/assets/css/0.styles.d5cfe64c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-999d3bb4><div data-v-999d3bb4><div id="loader-wrapper" class="loading-wrapper" data-v-2c578df8 data-v-999d3bb4 data-v-999d3bb4><div class="loader-main" data-v-2c578df8><div data-v-2c578df8></div><div data-v-2c578df8></div><div data-v-2c578df8></div><div data-v-2c578df8></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-067bd032 data-v-999d3bb4 data-v-999d3bb4><h3 class="title" data-v-067bd032 data-v-067bd032>不眠</h3> <p class="description" data-v-067bd032 data-v-067bd032>生活不仅需要氧气，更需要勇气</p> <label id="box" class="inputBox" data-v-067bd032 data-v-067bd032><input type="password" value="" data-v-067bd032> <span data-v-067bd032>Konck! Knock!</span> <button data-v-067bd032>OK</button></label> <div class="footer" data-v-067bd032 data-v-067bd032><span data-v-067bd032><i class="iconfont reco-theme" data-v-067bd032></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-067bd032>vuePress-theme-reco</a></span> <span data-v-067bd032><i class="iconfont reco-copyright" data-v-067bd032></i> <a data-v-067bd032><span data-v-067bd032>william</span>
            
          <!---->
          2022
        </a></span></div></div> <div class="hide" data-v-999d3bb4><header class="navbar" data-v-999d3bb4><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog_front/" class="home-link router-link-active"><img src="/blog_front/1.png" alt="不眠" class="logo"> <span class="site-name">不眠</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog_front/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      目录
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog_front/categories/AudioAndVideo/" class="nav-link"><i class="undefined"></i>
  AudioAndVideo
</a></li><li class="dropdown-item"><!----> <a href="/blog_front/categories/react/" class="nav-link"><i class="undefined"></i>
  react
</a></li><li class="dropdown-item"><!----> <a href="/blog_front/categories/vue/" class="nav-link"><i class="undefined"></i>
  vue
</a></li></ul></div></div><div class="nav-item"><a href="/blog_front/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/blog_front/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      文档
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog_front/docs/theme-reco/" class="nav-link"><i class="undefined"></i>
  前端工程化
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      联系
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/yokeney" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-999d3bb4></div> <aside class="sidebar" data-v-999d3bb4><div class="personal-info-wrapper" data-v-e2878dae data-v-999d3bb4><img src="/blog_front/1.png" alt="author-avatar" class="personal-img" data-v-e2878dae> <h3 class="name" data-v-e2878dae>
    william
  </h3> <div class="num" data-v-e2878dae><div data-v-e2878dae><h3 data-v-e2878dae>18</h3> <h6 data-v-e2878dae>Articles</h6></div> <div data-v-e2878dae><h3 data-v-e2878dae>0</h3> <h6 data-v-e2878dae>Tags</h6></div></div> <ul class="social-links" data-v-e2878dae></ul> <hr data-v-e2878dae></div> <nav class="nav-links"><div class="nav-item"><a href="/blog_front/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      目录
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog_front/categories/AudioAndVideo/" class="nav-link"><i class="undefined"></i>
  AudioAndVideo
</a></li><li class="dropdown-item"><!----> <a href="/blog_front/categories/react/" class="nav-link"><i class="undefined"></i>
  react
</a></li><li class="dropdown-item"><!----> <a href="/blog_front/categories/vue/" class="nav-link"><i class="undefined"></i>
  vue
</a></li></ul></div></div><div class="nav-item"><a href="/blog_front/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/blog_front/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      文档
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog_front/docs/theme-reco/" class="nav-link"><i class="undefined"></i>
  前端工程化
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      联系
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/yokeney" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-067bd032 data-v-999d3bb4><h3 class="title" data-v-067bd032 data-v-067bd032>2021前端vue面试题</h3> <!----> <label id="box" class="inputBox" data-v-067bd032 data-v-067bd032><input type="password" value="" data-v-067bd032> <span data-v-067bd032>Konck! Knock!</span> <button data-v-067bd032>OK</button></label> <div class="footer" data-v-067bd032 data-v-067bd032><span data-v-067bd032><i class="iconfont reco-theme" data-v-067bd032></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-067bd032>vuePress-theme-reco</a></span> <span data-v-067bd032><i class="iconfont reco-copyright" data-v-067bd032></i> <a data-v-067bd032><span data-v-067bd032>william</span>
            
          <!---->
          2022
        </a></span></div></div> <div data-v-999d3bb4><main class="page"><section><div class="page-title"><h1 class="title">2021前端vue面试题</h1> <div data-v-10e19382><i class="iconfont reco-account" data-v-10e19382><span data-v-10e19382>william</span></i> <i class="iconfont reco-date" data-v-10e19382><span data-v-10e19382>3/1/2021</span></i> <!----> <!----></div></div> <div class="theme-reco-content content__default"><h3 id="_1-什么是-mvvm"><a href="#_1-什么是-mvvm" class="header-anchor">#</a> 1. 什么是 MVVM？</h3> <ul><li>MVVM 是Model-View-ModelView的缩写，是一种脱胎于 MVC 模式的设计模式。</li> <li>Model 代表数据层，负责存放业务相关的数据；</li> <li>View 代表视图层，负责在页面上展示数据；</li> <li><code>ViewModel 是的作用是同步 View 和 Model 之间的关联，其实现同步关联的核心是DOM Listeners和 Data Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化，并会选择性的传给 Model；Data Bindings 工具用于监听 Model 数据变化，并将其更新给 View。</code></li></ul> <h3 id="_2-组件通讯"><a href="#_2-组件通讯" class="header-anchor">#</a> 2.组件通讯</h3> <h4 id="父传子"><a href="#父传子" class="header-anchor">#</a> 父传子</h4> <blockquote><p>父传子利用props</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">**</span>父组件代码<span class="token operator">**</span>
<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>header<span class="token operator">-</span>box <span class="token operator">:</span>title<span class="token operator">-</span>txt<span class="token operator">=</span><span class="token string">&quot;showTitleTxt&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>header<span class="token operator">-</span>box<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    <span class="token keyword">import</span> Header <span class="token keyword">from</span> <span class="token string">'./header'</span>
    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token string-property property">'header-box'</span><span class="token operator">:</span> Header
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">showTitleTxt</span><span class="token operator">:</span> <span class="token string">'首页'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>


<span class="token operator">**</span>子组件代码<span class="token operator">**</span>
<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>header<span class="token operator">&gt;</span>
        <span class="token punctuation">{</span><span class="token punctuation">{</span>thisTitleTxt<span class="token punctuation">}</span><span class="token punctuation">}</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>header<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'header-box'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">titleTxt</span><span class="token operator">:</span> String
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">thisTitleTxt</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>titleTxt
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div><h4 id="子传父"><a href="#子传父" class="header-anchor">#</a> 子传父</h4> <p>利用on和 on和on和emit 即子组件利用一个事件来触发$emit来传递出去一个事件及参数，然后在父组件里绑定这个事件，然后处理这个事件，获取传递的参数
子组件改变父组件传递的props（你会发现通过props可传递复杂类型数据，可以通过子组件改变数据内容，不推荐使用，因为vue是规定props是单向绑定）</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">*</span>通过$on<span class="token punctuation">,</span>$emit<span class="token operator">*</span>
<span class="token operator">**</span>父组件代码<span class="token operator">**</span>
<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;counter-event-example&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> total <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>button<span class="token operator">-</span>counter v<span class="token operator">-</span>on<span class="token operator">:</span>increment<span class="token operator">=</span><span class="token string">&quot;incrementTotal&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">-</span>counter<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    <span class="token keyword">import</span> ButtonCounter <span class="token keyword">from</span> <span class="token string">'./buttonCounter'</span>
    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token string-property property">'button-conuter'</span><span class="token operator">:</span> ButtonCounter
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">total</span><span class="token operator">:</span> <span class="token number">0</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token function">incrementTotal</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>total<span class="token operator">++</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>


<span class="token operator">**</span>子组件代码<span class="token operator">**</span>
<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>button @click<span class="token operator">=</span><span class="token string">&quot;incrementCounter&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>counter<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'button-counter'</span><span class="token punctuation">,</span>
        <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">counter</span><span class="token operator">:</span> <span class="token number">0</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">metheds</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token function">incrementCounter</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>counter<span class="token operator">++</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br></div></div><h4 id="非父子"><a href="#非父子" class="header-anchor">#</a> 非父子</h4> <p><strong>创建一个空的vue实例，然后挂载到当前的vue实例的原型上,然后一个组件进行e m i t 传 递 事 件 以 及 需 要 传 递 的 数 据 。 在 另 一 个 组 件 那 里 就 可 以 进 行 使 用 emit传递事件以及需要传递的数据。在另一个组件那里就可以进行使用emit传递事件以及需要传递的数据。在另一个组件那里就可以进行使用on来接受这个事件并处理这个传递参数</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> bus <span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>bus <span class="token operator">=</span> bus
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="vuex"><a href="#vuex" class="header-anchor">#</a> vuex</h4> <h3 id="_3-生命周期"><a href="#_3-生命周期" class="header-anchor">#</a> 3.生命周期</h3> <p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/84bd56f4844046c1bae661d2debe9388~tplv-k3u1fbpfcp-watermark.image?" alt="v2-5c29f94ef025b036a8c9b5cea3b39a50_1440w.jpg"></p> <ul><li>beforeCreate：vue实例的挂载元素el和数据对象data都是undefined，还没用初始化</li> <li>created：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有</li> <li>beforeMount：vue实例的el和data都初始化了，但是挂载之前未虚拟DOM节点</li> <li>mounted：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点</li> <li>beforeupdated：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动一处已添加的事件监听器</li> <li>updated：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环</li> <li>beforeDestroy：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件</li> <li>destroyed：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁</li></ul> <h3 id="_4-vue组件中data必须是一个函数"><a href="#_4-vue组件中data必须是一个函数" class="header-anchor">#</a> 4.vue组件中data必须是一个函数</h3> <blockquote><p>如果 data 是一个对象，当复用组件时，因为 data 都会指向同一个引用类型地址，其中一个组件的 &gt; data 一旦发生修改，则其他重用的组件中的 data 也会被一并修改。
如果 data 是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不&gt; 会出现如上问题。</p></blockquote> <h3 id="_5-vue-中-v-if-和-v-show-有什么区别"><a href="#_5-vue-中-v-if-和-v-show-有什么区别" class="header-anchor">#</a> 5.Vue 中 v-if 和 v-show 有什么区别？</h3> <p>v-if 在进行切换时，会直接对标签进行创建或销毁，不显示的标签不会加载在 DOM 树中。v-show 在进行切换时，会对标签的 display 属性进行切换，通过 display 不显示来隐藏元素。
一般来说，v-if 的性能开销会比 v-show 大，切换频繁的标签更适合使用 v-show。</p> <h3 id="_6-vue-中-computed-和-watch-有什么区别"><a href="#_6-vue-中-computed-和-watch-有什么区别" class="header-anchor">#</a> 6.Vue 中 computed 和 watch 有什么区别？</h3> <p><strong>计算属性 computed：</strong></p> <ol><li>支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；</li> <li>计算属性内不支持异步操作；</li> <li>计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；</li> <li>计算属性是自动监听依赖值的变化，从而动态返回内容。</li></ol> <p><strong>侦听属性 watch：</strong></p> <ol><li>不支持缓存，只要数据发生变化，就会执行侦听函数；</li> <li>侦听属性内支持异步操作；</li> <li>侦听属性的值可以是一个对象，接收 handler 回调，deep，immediate 三个属性；</li> <li>监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情。</li></ol> <h3 id="_7-nexttick-是什么"><a href="#_7-nexttick-是什么" class="header-anchor">#</a> 7.$nextTick 是什么</h3> <p>Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。</p> <h3 id="_8-v-for-中-key-的作用是什么"><a href="#_8-v-for-中-key-的作用是什么" class="header-anchor">#</a> 8. v-for 中 key 的作用是什么？</h3> <p>key 是 Vue 使用 v-for 渲染列表时的节点标识。使用了 key 之后，当列表项发生变化时，Vue 会基于 key 的变化而重新排列元素顺序，并且移除 key 不存在的元素，提升运行效率。</p> <h3 id="_9-vue-的双向数据绑定原理是什么"><a href="#_9-vue-的双向数据绑定原理是什么" class="header-anchor">#</a> 9. Vue 的双向数据绑定原理是什么？</h3> <ul><li>Vue 采用数据劫持+订阅发布模式实现双向绑定。通过 Object.defineProperty()方法来为组件中 data 的每个属性添加 get 和 set 方法，在数据变动时，触发 set 里相应的监听回调函数，将变动信息发布给订阅者。主要有以下步骤：</li></ul> <p>组件初始化时：</p> <ol><li><code>创建一个dep 对象作为观察者（依赖收集、订阅发布的载体）；</code></li> <li><code>通过Object.defineProperty()方法对 data 中的属性及子属性对象的属性，添加 getter 和 setter 方法； 调用 getter 时，便去 dep 里注册函数。调用 setter 时，便去通知执行刚刚注册的函数。</code></li> <li><code>组件挂载时</code>：</li> <li><code>compile解析模板指令，将其中的变量替换成数据。然后初始化渲染页面视图，并将每个指令对应的节点绑定上更新函数、监听函数。后续一旦数据发生变化，便会更新页面。页面发生变化时也会相应发布变动信息；</code></li> <li><code>组件同时会定义一个watcher 类作为订阅者，watcher 可以视作 dep 和组件之间的桥梁。其在实例化时会向 dep 中添加自己，同时自身又有一个 update 方法，待收到 dep 的变动通知时，便会调用自己的 update 方法，触发 compile 中的相应函数完成更新。</code></li></ol> <h3 id="_10-如何动态更新对象或数组的值"><a href="#_10-如何动态更新对象或数组的值" class="header-anchor">#</a> 10.如何动态更新对象或数组的值？</h3> <p>因为 Object.defineProperty()的限制，Vue 无法监听到对象或数组内部某个属性值的变化，因此在直接设置以上两类数据的值时，页面不会实时更新。此时可以通过 this.$set 方法来解决：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span>要改变的数组<span class="token operator">/</span>对象，要改变的位置<span class="token operator">/</span>key，要改成的value<span class="token punctuation">)</span>

<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>arr<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">&quot;OBKoro1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 改变数组 </span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>obj<span class="token punctuation">,</span> <span class="token string">&quot;c&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;OBKoro1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 改变对象</span>
数组原生方法造成的数据更新，可以被 Vue 监听到。如 <span class="token function">splice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>等。
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_11-常用的事件修饰符有哪些"><a href="#_11-常用的事件修饰符有哪些" class="header-anchor">#</a> 11.常用的事件修饰符有哪些？</h3> <ul><li>.stop：阻止冒泡；</li> <li>.prevent：阻止默认行为；</li> <li>.self：仅绑定元素自身可触发；</li> <li>.once：只触发一次..</li></ul> <h3 id="_12-vue-如何获取-dom-元素"><a href="#_12-vue-如何获取-dom-元素" class="header-anchor">#</a> 12.Vue 如何获取 DOM 元素？</h3> <blockquote><p>首先先为标签元素设置 ref 属性，然后通过 this.$refs.属性值获取。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>div ref<span class="token operator">=</span><span class="token string">&quot;test&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span> <span class="token keyword">const</span> dom <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>test
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_13-v-on-如何绑定多个事件"><a href="#_13-v-on-如何绑定多个事件" class="header-anchor">#</a> 13.v-on 如何绑定多个事件？</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;text&quot;</span> v<span class="token operator">-</span>on<span class="token operator">=</span><span class="token string">&quot;{ input:onInput,focus:onFocus,blur:onBlur }&quot;</span><span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_14-vue-初始化页面闪动问题如何解决"><a href="#_14-vue-初始化页面闪动问题如何解决" class="header-anchor">#</a> 14.Vue 初始化页面闪动问题如何解决？</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>出现该问题是因为在 Vue 代码尚未被解析之前，尚无法控制页面中 <span class="token constant">DOM</span> 的显示，所以会看见模板字符串等代码。 解决方案是，在 css 代码中添加 v<span class="token operator">-</span>cloak 规则，同时在待编译的标签上添加 v<span class="token operator">-</span>cloak 属性：
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">[</span>v<span class="token operator">-</span>cloak<span class="token punctuation">]</span> <span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator">&lt;</span>div v<span class="token operator">-</span>cloak<span class="token operator">&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> message <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_15-vue-如何清除浏览器缓存"><a href="#_15-vue-如何清除浏览器缓存" class="header-anchor">#</a> 15.Vue 如何清除浏览器缓存？</h3> <ol><li>项目打包的时候给每个打包文件加上 hash 值，一般是在文件后面加上时间戳；</li> <li>在 html 文件中加入 meta 标签，content 属性设置为no-cache;</li> <li>在后端服务器中进行禁止缓存设置。</li></ol> <h3 id="_16-vue-router-路由有哪些模式"><a href="#_16-vue-router-路由有哪些模式" class="header-anchor">#</a> 16.Vue-router 路由有哪些模式？</h3> <ul><li><p>hash 模式：后面的 hash 值的变化，浏览器既不会向服务器发出请求，浏览器也不会刷新，每次 hash 值的变化会触发 hashchange 事件。</p></li> <li><p>history 模式：利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。</p></li> <li><p>hash 模式：后面的 hash 值的变化，浏览器既不会向服务器发出请求，浏览器也不会刷新，每次 hash 值的变化会触发 hashchange 事件。</p></li></ul> <hr> <p><code>history 模式：利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。</code></p> <h3 id="_18-vuex-是什么-有哪几种属性"><a href="#_18-vuex-是什么-有哪几种属性" class="header-anchor">#</a> 18.Vuex 是什么？有哪几种属性？</h3> <p><strong>Vuex 是专为Vue设计的状态管理工具，采用集中式储存管理 Vue 中所有组件的状态。</strong></p> <ul><li><code>state属性：基本数据；</code></li> <li><code>getters属性：从 state 中派生出的数据；</code></li> <li><code>mutation属性：更新 store 中数据的唯一途径，其接收一个以 state 为第一参数的回调函数；</code></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">increment</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 变更状态</span>
      state<span class="token punctuation">.</span>count<span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">increment</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      state<span class="token punctuation">.</span>count<span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">increment2</span><span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">fun</span><span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      context<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'increment2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><ol start="5"><li>module 属性：用于将 store分割成不同的模块。</li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> moduleB <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">a</span><span class="token operator">:</span> moduleA<span class="token punctuation">,</span>
    <span class="token literal-property property">b</span><span class="token operator">:</span> moduleB
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>a <span class="token comment">// -&gt; moduleA 的状态</span>
store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>b <span class="token comment">// -&gt; moduleB 的状态</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="_19-说一下v-model的原理"><a href="#_19-说一下v-model的原理" class="header-anchor">#</a> 19.说一下v-model的原理</h3> <p><strong><code>v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。</code></strong></p> <p><strong>作用在表单元素上</strong> 动态绑定了 input 的 value 指向了 messgae 变量，并且在触发 input 事件的时候去动态把 message设置为目标值：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>input v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;sth&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token comment">//  等同于</span>
<span class="token operator">&lt;</span>input 
    v<span class="token operator">-</span>bind<span class="token operator">:</span>value<span class="token operator">=</span><span class="token string">&quot;message&quot;</span> 
    v<span class="token operator">-</span>on<span class="token operator">:</span>input<span class="token operator">=</span><span class="token string">&quot;message=$event.target.value&quot;</span>
<span class="token operator">&gt;</span>
<span class="token comment">//$event 指代当前触发的事件对象;</span>
<span class="token comment">//$event.target 指代当前触发的事件对象的dom;</span>
<span class="token comment">//$event.target.value 就是当前dom的value值;</span>
<span class="token comment">//在@input方法中，value =&gt; sth;</span>
<span class="token comment">//在:value中,sth =&gt; value;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="_20-vue模版编译原理知道吗-能简单说一下吗"><a href="#_20-vue模版编译原理知道吗-能简单说一下吗" class="header-anchor">#</a> 20.Vue模版编译原理知道吗，能简单说一下吗？</h3> <p>简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：</p> <ul><li>生成AST树</li> <li>优化</li> <li>codegen
首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。
使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。</li></ul> <p>Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。</p> <p>编译的最后一步是将优化后的AST树转换为可执行的代码。</p> <h3 id="_21-vue中组件生命周期调用顺序"><a href="#_21-vue中组件生命周期调用顺序" class="header-anchor">#</a> 21.Vue中组件生命周期调用顺序</h3> <ul><li>组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。</li> <li>组件的销毁操作是先父后子，销毁完成的顺序是先子后父。</li></ul> <h4 id="加载渲染过程"><a href="#加载渲染过程" class="header-anchor">#</a> 加载渲染过程</h4> <p><code>父beforeCreate-&gt;父created-&gt;父beforeMount-&gt;子beforeCreate-&gt;子created-&gt;子beforeMount- &gt;子mounted-&gt;父mounted</code></p> <h4 id="子组件更新过程"><a href="#子组件更新过程" class="header-anchor">#</a> 子组件更新过程</h4> <p><code>父 beforeUpdate -&gt; 父 updated</code></p> <h4 id="销毁过程"><a href="#销毁过程" class="header-anchor">#</a> 销毁过程</h4> <p><code>父beforeDestroy-&gt;子beforeDestroy-&gt;子destroyed-&gt;父destroyed</code></p> <h2 id="vue-router有哪几种导航钩子"><a href="#vue-router有哪几种导航钩子" class="header-anchor">#</a> vue-router有哪几种导航钩子？</h2> <ol><li>全局导航钩子：router.beforeEach(to,from,next)</li> <li>组件内的钩子beforeRouteEnter (to, from, next) beforeRouteUpdate (to, from, next) beforeRouteLeave (to, from, next)</li> <li>单独路由独享组件 beforeEnter: (to, from, next)</li></ol> <h3 id="_22-你都做过哪些vue的性能优化"><a href="#_22-你都做过哪些vue的性能优化" class="header-anchor">#</a> 22.你都做过哪些Vue的性能优化</h3> <h4 id="编码阶段"><a href="#编码阶段" class="header-anchor">#</a> 编码阶段</h4> <ol><li>尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher</li> <li>v-if和v-for不能连用</li> <li>如果需要使用v-for给每项元素绑定事件时使用事件代理</li> <li>SPA 页面采用keep-alive缓存组件</li> <li>在更多的情况下，使用v-if替代v-show</li> <li>key保证唯一</li> <li>使用路由懒加载、异步组件</li> <li>防抖、节流第三方模块按需导入</li> <li>长列表滚动到可视区域动态加载</li> <li>图片懒加载
这里附上：
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37969f1c2dba49da8517879c1bf0cf6d~tplv-k3u1fbpfcp-watermark.image?" alt="vue  项目优化解析.png"> <strong>23.自定义指令基本内容</strong></li></ol> <ul><li>全局定义：<code>Vue.directive(&quot;focus&quot;,{})</code></li> <li>局部定义：<code>directives:{focus:{}}</code></li> <li>钩子函数：指令定义对象提供钩子函数</li></ul> <ol><li><code>bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。</code></li> <li><code>inSerted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。</code></li> <li><code>update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前调用。指令的值可能发生了改变，也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。</code></li> <li><code>ComponentUpdate：指令所在组件的 VNode及其子VNode全部更新后调用。</code></li> <li><code>unbind：只调用一次，指令与元素解绑时调用</code> <strong>使用场景</strong></li></ol> <ul><li>普通DOM元素进行底层操作的时候，可以使用自定义指令</li> <li>自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。
<strong>使用案例</strong>
初级应用：</li> <li>鼠标聚焦</li> <li>下拉菜单</li> <li>相对时间转换</li> <li>滚动动画
高级应用：</li> <li>自定义指令实现图片懒加载</li> <li>自定义指令集成第三方插件</li></ul> <h3 id="_24-vue是如何收集依赖的"><a href="#_24-vue是如何收集依赖的" class="header-anchor">#</a> 24.Vue是如何收集依赖的？</h3> <div class="language- extra-class"><pre><code>在初始化 Vue 的每个组件时，会对组件的 data 进行初始化，就会将由普通对象变成响应式对象，在这个过程中便会进行依赖收集的相关逻辑，如下所示∶
</code></pre></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Dep</span> <span class="token punctuation">{</span>
 <span class="token keyword">static</span> target<span class="token punctuation">;</span>
 subs<span class="token punctuation">;</span>

 <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token operator">...</span>
   <span class="token keyword">this</span><span class="token punctuation">.</span>subs <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
 <span class="token function">addSub</span> <span class="token punctuation">(</span><span class="token parameter">sub</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">this</span><span class="token punctuation">.</span>subs<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>sub<span class="token punctuation">)</span>
 <span class="token punctuation">}</span>
 <span class="token function">removeSub</span> <span class="token punctuation">(</span><span class="token parameter">sub</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token function">remove</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>sub<span class="token punctuation">,</span> sub<span class="token punctuation">)</span>
 <span class="token punctuation">}</span>
 <span class="token function">depend</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">if</span><span class="token punctuation">(</span>Dep<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">{</span>
     Dep<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">addDep</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
   <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
 <span class="token function">notify</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> subs <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>subds<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>i <span class="token operator">&lt;</span> subs<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
     subs<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
   <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><p><strong>Dep 是一个 class ，其中有一个关 键的静态属性 static，它指向了一个全局唯一 Watcher，保证了同一时间全局只有一个 watcher 被计算，另一个属性 subs 则是一个 Watcher 的数组，所以 Dep 实际上就是对 Watcher 的管理，再看看 Watcher 的相关代码∶</strong></p> <h3 id="watcher"><a href="#watcher" class="header-anchor">#</a> <strong>Watcher</strong></h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Watcher</span> <span class="token punctuation">{</span>
  getter<span class="token punctuation">;</span>
  <span class="token operator">...</span>
  <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">vm<span class="token punctuation">,</span> expression</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token operator">...</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>getter <span class="token operator">=</span> expression<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">pushTarget</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getter</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>vm<span class="token punctuation">,</span> vm<span class="token punctuation">)</span>
    <span class="token operator">...</span>
    <span class="token keyword">return</span> value
  <span class="token punctuation">}</span>
  <span class="token function">addDep</span> <span class="token punctuation">(</span><span class="token parameter">dep</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token operator">...</span>
    dep<span class="token punctuation">.</span><span class="token function">addSub</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
<span class="token comment">//</span>
<span class="token keyword">function</span> <span class="token function">pushTarget</span> <span class="token punctuation">(</span><span class="token parameter">_target</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  Dep<span class="token punctuation">.</span>target <span class="token operator">=</span> _target
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p><code>Watcher 是一个 class，它定义了一些方法，其中和依赖收集相关的主要有 get、addDep 等。</code></p> <h4 id="过程"><a href="#过程" class="header-anchor">#</a> <strong>过程</strong></h4> <p>在实例化 Vue 时，依赖收集的相关过程如下∶ 初 始 化 状 态 initState ， 这 中 间 便 会 通 过 defineReactive 将数据变成响应式对象，其中的 getter 部分便是用来依赖收集的。 初始化最终会走 mount 过程，其中会实例化 Watcher ，进入 Watcher 中，便会执行 this.get() 方法，</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function-variable function">updateComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> vm<span class="token punctuation">.</span><span class="token function">_update</span><span class="token punctuation">(</span>vm<span class="token punctuation">.</span><span class="token function">_render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">new</span> <span class="token class-name">Watcher</span><span class="token punctuation">(</span>vm<span class="token punctuation">,</span> updateComponent<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p><code>get 方法中的 pushTarget 实际上就是把 Dep.target 赋值为当前的 watcher。this.getter.call（vm，vm），这里的 getter 会执行 vm._render() 方法，在这个过程中便会触发数据对象的 getter。那么每个对象值的 getter 都持有一个 dep，在触发 getter 的时候会调用 dep.depend() 方法，也就会执行 Dep.target.addDep(this)。刚才 Dep.target 已经被赋值为 watcher，于是便会执行 addDep 方法，然后走到 dep.addSub() 方法，便将当前的 watcher 订阅到这个数据持有的 dep 的 subs 中，这个目的是为后续数据变化时候能通知到哪些 subs 做准备。所以在 vm._render() 过程中，会触发所有数据的 getter，这样便已经完成了一个依赖收集的过程。</code></p></blockquote> <h3 id="_25-对ssr的理解"><a href="#_25-对ssr的理解" class="header-anchor">#</a> 25.对SSR的理解</h3> <p>SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端</p> <p>SSR的优势：</p> <ul><li>更好的SEO</li> <li>首屏加载速度更快</li></ul> <p>SSR的缺点：</p> <ul><li>开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子；</li> <li>当需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境；</li> <li>更多的服务端负载。</li></ul> <h3 id="_26-keep-alive-中的生命周期哪些"><a href="#_26-keep-alive-中的生命周期哪些" class="header-anchor">#</a> 26.keep-alive 中的生命周期哪些</h3> <p>keep-alive是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。</p> <p>如果为一个组件包裹了 keep-alive，那么它会多出两个生命周期：deactivated、activated。同时，beforeDestroy 和 destroyed 就不会再被触发了，因为组件不会被真正销毁。</p> <p>当组件被换掉时，会被缓存到内存中、触发 deactivated 生命周期；当组件被切回来时，再去缓存里找这个组件、触发 activated钩子函数。</p> <h4 id="seo优化"><a href="#seo优化" class="header-anchor">#</a> SEO优化</h4> <ul><li>预渲染</li> <li>服务端渲染SSR</li></ul> <h4 id="打包优化"><a href="#打包优化" class="header-anchor">#</a> 打包优化</h4> <ul><li>压缩代码</li> <li>Tree Shaking/Scope Hoisting</li> <li>使用cdn加载第三方模块</li> <li>多线程打包happypack</li> <li>splitChunks抽离公共文件</li> <li>sourceMap优化</li></ul> <h2 id="vue项目遇到的问题"><a href="#vue项目遇到的问题" class="header-anchor">#</a> vue项目遇到的问题</h2> <h3 id="_1-在开发过程中-如果你的-vue-程序和后端-api-服务器未在同一主机上运行-该如何代理-api-请求。假设使用-vue-cli-3-进行设置"><a href="#_1-在开发过程中-如果你的-vue-程序和后端-api-服务器未在同一主机上运行-该如何代理-api-请求。假设使用-vue-cli-3-进行设置" class="header-anchor">#</a> 1 .在开发过程中，如果你的 Vue 程序和后端 API 服务器未在同一主机上运行，该如何代理 API 请求。假设使用 Vue-CLI 3 进行设置？</h3> <p>在 vue.config.js 文件中：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports<span class="token operator">:</span> <span class="token punctuation">{</span>
 <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
     <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
         <span class="token string-property property">'/api'</span><span class="token operator">:</span> <span class="token punctuation">{</span> 
             <span class="token literal-property property">target</span><span class="token operator">:</span> ‘http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>localhost<span class="token operator">:</span><span class="token number">4040</span><span class="token operator">/</span>api’<span class="token punctuation">,</span> 
             <span class="token literal-property property">changeOrigin</span><span class="token operator">:</span> <span class="token boolean">true</span> 
         <span class="token punctuation">}</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="_2-prop-如何指定其类型要求"><a href="#_2-prop-如何指定其类型要求" class="header-anchor">#</a> 2. prop 如何指定其类型要求？</h3> <div class="language- extra-class"><pre><code>通过实现 prop 验证选项，可以为单个 prop 指定类型要求。这对生产没有影响，但是会在开发阶段发出警告，从而帮助开发人员识别传入数据和 prop 的特定类型要求的潜在问题。
</code></pre></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>   <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
   <span class="token literal-property property">accountNumber</span><span class="token operator">:</span> <span class="token punctuation">{</span>
       <span class="token literal-property property">type</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
       <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token punctuation">{</span>
       <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span>
       <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">favoriteColors</span><span class="token operator">:</span> Array
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="_26-组件通信"><a href="#_26-组件通信" class="header-anchor">#</a> 26.组件通信</h3> <p>组件通信的方式如下：</p> <h3 id="_1-props-emit"><a href="#_1-props-emit" class="header-anchor">#</a> （1） props  /   $emit</h3> <p>父组件通过<code>props</code>向子组件传递数据，子组件通过<code>$emit</code>和父组件通信</p> <h5 id="_1-父组件向子组件传值"><a href="#_1-父组件向子组件传值" class="header-anchor">#</a> 1. 父组件向子组件传值</h5> <ul><li><code>props</code>只能是父组件向子组件进行传值，<code>props</code>使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。</li> <li><code>props</code> 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。</li> <li><code>props</code>属性名规则：若在<code>props</code>中使用驼峰形式，模板中需要使用短横线的形式</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 父组件</span>
<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;father&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>son <span class="token operator">:</span>msg<span class="token operator">=</span><span class="token string">&quot;msgData&quot;</span> <span class="token operator">:</span>fn<span class="token operator">=</span><span class="token string">&quot;myFunction&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>son<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> son <span class="token keyword">from</span> <span class="token string">&quot;./son.vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> father<span class="token punctuation">,</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">msgData</span><span class="token operator">:</span> <span class="token string">&quot;父组件数据&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;vue&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        son
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 子组件</span>
<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;son&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>msg<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button @click<span class="token operator">=</span><span class="token string">&quot;fn&quot;</span><span class="token operator">&gt;</span>按钮<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;son&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;msg&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;fn&quot;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h5 id="子组件向父组件传值"><a href="#子组件向父组件传值" class="header-anchor">#</a> 子组件向父组件传值</h5> <ul><li><code>$emit</code>绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过<code>v-on</code>监听并接收参数。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 父组件</span>
<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;section&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>com<span class="token operator">-</span>article <span class="token operator">:</span>articles<span class="token operator">=</span><span class="token string">&quot;articleList&quot;</span> @onEmitIndex<span class="token operator">=</span><span class="token string">&quot;onEmitIndex&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>com<span class="token operator">-</span>article<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>currentIndex<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> comArticle <span class="token keyword">from</span> <span class="token string">'./test/article.vue'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'comArticle'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> comArticle <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">currentIndex</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>
      <span class="token literal-property property">articleList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'红楼梦'</span><span class="token punctuation">,</span> <span class="token string">'西游记'</span><span class="token punctuation">,</span> <span class="token string">'三国演义'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">onEmitIndex</span><span class="token punctuation">(</span><span class="token parameter">idx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>currentIndex <span class="token operator">=</span> idx
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">/</span>子组件
<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in articles&quot;</span> <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;index&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;emitIndex(index)&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'articles'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">emitIndex</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'onEmitIndex'</span><span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token comment">// 触发父组件的方法，并传递参数index</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="eventbus事件总线-emit-on"><a href="#eventbus事件总线-emit-on" class="header-anchor">#</a> eventBus事件总线（<code>$emit / $on</code>）</h3> <p><code>eventBus</code>事件总线适用于<strong>父子组件</strong>、<strong>非父子组件</strong>等之间的通信，使用步骤如下：  <strong>（1）创建事件中心管理组件之间的通信</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// event-bus.js</span>

<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> EventBus <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>发送事件</strong> 假设有两个兄弟组件<code>firstCom</code>和<code>secondCom</code>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>first<span class="token operator">-</span>com<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>first<span class="token operator">-</span>com<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>second<span class="token operator">-</span>com<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>second<span class="token operator">-</span>com<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> firstCom <span class="token keyword">from</span> <span class="token string">'./firstCom.vue'</span>
<span class="token keyword">import</span> secondCom <span class="token keyword">from</span> <span class="token string">'./secondCom.vue'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> firstCom<span class="token punctuation">,</span> secondCom <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>在<code>firstCom</code>组件中发送事件：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>button @click<span class="token operator">=</span><span class="token string">&quot;add&quot;</span><span class="token operator">&gt;</span>加法<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>    
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>EventBus<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./event-bus.js'</span> <span class="token comment">// 引入事件中心</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span><span class="token punctuation">{</span>
      <span class="token literal-property property">num</span><span class="token operator">:</span><span class="token number">0</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      EventBus<span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'addition'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">num</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>num<span class="token operator">++</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p><strong>接收事件</strong> 在<code>secondCom</code>组件中发送事件：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>求和<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> EventBus <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./event-bus.js'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    EventBus<span class="token punctuation">.</span><span class="token function">$on</span><span class="token punctuation">(</span><span class="token string">'addition'</span><span class="token punctuation">,</span> <span class="token parameter">param</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>count <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count <span class="token operator">+</span> param<span class="token punctuation">.</span>num<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><blockquote><p>在上述代码中，这就相当于将<code>num</code>值存贮在了事件总线中，在其他组件中可以直接访问。事件总线就相当于一个桥梁，不用组件通过它来通信。</p></blockquote> <blockquote><p>虽然看起来比较简单，但是这种方法也有不变之处，如果项目过大，使用这种方式进行通信，后期维护起来会很困难</p></blockquote> <h3 id="依赖注入-provide-inject"><a href="#依赖注入-provide-inject" class="header-anchor">#</a> 依赖注入（provide / inject）</h3> <p>这种方式就是Vue中的<strong>依赖注入</strong>，该方法用于<strong>父子组件之间的通信</strong>。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方法来进行传值。就不用一层一层的传递了。
<code>provide / inject</code>是Vue提供的两个钩子，和<code>data</code>、<code>methods</code>是同级的。并且<code>provide</code>的书写形式和<code>data</code>一样。</p> <ul><li><code>provide</code> 钩子用来发送数据或方法</li> <li><code>inject</code>钩子用来接收数据或方法</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//父</span>
<span class="token function">provide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>num <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token comment">//子</span>
<span class="token literal-property property">inject</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'num'</span><span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong><code>依赖注入所提供的属性是非响应式的。</code></strong></p> <h3 id="parent-children"><a href="#parent-children" class="header-anchor">#</a> $parent / $children</h3> <ul><li>使用<code>$parent</code>可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）</li> <li>使用<code>$children</code>可以让组件访问子组件的实例，但是，<code>$children</code>并不能保证顺序，并且访问的数据也不是响应式的。</li></ul> <h3 id="attrs-listeners"><a href="#attrs-listeners" class="header-anchor">#</a> <code>$attrs / $listeners</code></h3> <p>考虑一种场景，如果A是B组件的父组件，B是C组件的父组件。如果想要组件A给组件C传递数据，这种隔代的数据，该使用哪种方式呢？</p> <p>如果是用<code>props/$emit</code>来一级一级的传递，确实可以完成，但是比较复杂；如果使用事件总线，在多人开发或者项目较大的时候，维护起来很麻烦；如果使用Vuex，的确也可以，但是如果仅仅是传递数据，那可能就有点浪费了。</p> <p>针对上述情况，Vue引入了<code>$attrs / $listeners</code>，实现组件之间的跨代通信。</p> <p>先来看一下<code>inheritAttrs</code>，它的默认值true，继承所有的父组件属性除<code>props</code>之外的所有属性；<code>inheritAttrs：false</code> 只继承class属性 。</p> <ul><li><code>$attrs</code>：继承所有的父组件属性（除了prop传递的属性、class 和 style ），一般用在子组件的子元素上</li> <li><code>$listeners</code>：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合 <code>v-on=&quot;$listeners&quot;</code> 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）</li></ul> <p>A组件（<code>APP.vue</code>）：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;app&quot;</span><span class="token operator">&gt;</span>
        <span class="token comment">//此处监听了两个事件，可以在B组件或者C组件中直接触发 </span>
        <span class="token operator">&lt;</span>child1 <span class="token operator">:</span>p<span class="token operator">-</span>child1<span class="token operator">=</span><span class="token string">&quot;child1&quot;</span> <span class="token operator">:</span>p<span class="token operator">-</span>child2<span class="token operator">=</span><span class="token string">&quot;child2&quot;</span> @test1<span class="token operator">=</span><span class="token string">&quot;onTest1&quot;</span> @test2<span class="token operator">=</span><span class="token string">&quot;onTest2&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>child1<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> Child1 <span class="token keyword">from</span> <span class="token string">'./Child1.vue'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> Child1 <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function">onTest1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'test1 running'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">onTest2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'test2 running'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>B组件（<code>Child1.vue</code>）</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;child-1&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>props<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>pChild1<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>$attrs<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>$attrs<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>child2 v<span class="token operator">-</span>bind<span class="token operator">=</span><span class="token string">&quot;$attrs&quot;</span> v<span class="token operator">-</span>on<span class="token operator">=</span><span class="token string">&quot;$listeners&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>child2<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> Child2 <span class="token keyword">from</span> <span class="token string">'./Child2.vue'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'pChild1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> Child2 <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">inheritAttrs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'test1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 触发APP.vue中的test1方法</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p>C 组件 (<code>Child2.vue</code>):</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;child-2&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>props<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>pChild2<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>$attrs<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>$attrs<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'pChild2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">inheritAttrs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'test2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 触发APP.vue中的test2方法</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>在上述代码中：</p> <ul><li>C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了<code>$listeners</code> 属性</li> <li>在B组件中通过v-bind 绑定<code>$attrs</code>属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的）</li></ul> <p><strong>Vue和React的区别</strong></p> <p>相同点：</p> <ul><li>1.都使用了虚拟dom</li> <li>2.组件化开发</li> <li>3.都是单向数据流(父子组件之间，不建议子修改父传下来的数据)</li> <li>4.都支持服务端渲染</li></ul> <p>不同点：</p> <ul><li>1.React的JSX，Vue的template</li> <li>2.数据变化，React手动(setState)，Vue自动(初始化已响应式处理，Object.defineProperty)</li> <li>3.React单向绑定，Vue双向绑定</li> <li>4.React的Redux，Vue的Vuex</li></ul></div></section> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/3/2022, 8:50:33 AM</span></div></footer> <!----> <div class="comments-wrapper"><!----></div> <ul class="side-bar sub-sidebar-wrapper" style="width:12rem;" data-v-92abcef6><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_1-什么是-mvvm" class="sidebar-link reco-side-_1-什么是-mvvm" data-v-92abcef6>1. 什么是 MVVM？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_2-组件通讯" class="sidebar-link reco-side-_2-组件通讯" data-v-92abcef6>2.组件通讯</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_3-生命周期" class="sidebar-link reco-side-_3-生命周期" data-v-92abcef6>3.生命周期</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_4-vue组件中data必须是一个函数" class="sidebar-link reco-side-_4-vue组件中data必须是一个函数" data-v-92abcef6>4.vue组件中data必须是一个函数</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_5-vue-中-v-if-和-v-show-有什么区别" class="sidebar-link reco-side-_5-vue-中-v-if-和-v-show-有什么区别" data-v-92abcef6>5.Vue 中 v-if 和 v-show 有什么区别？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_6-vue-中-computed-和-watch-有什么区别" class="sidebar-link reco-side-_6-vue-中-computed-和-watch-有什么区别" data-v-92abcef6>6.Vue 中 computed 和 watch 有什么区别？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_7-nexttick-是什么" class="sidebar-link reco-side-_7-nexttick-是什么" data-v-92abcef6>7.$nextTick 是什么</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_8-v-for-中-key-的作用是什么" class="sidebar-link reco-side-_8-v-for-中-key-的作用是什么" data-v-92abcef6>8. v-for 中 key 的作用是什么？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_9-vue-的双向数据绑定原理是什么" class="sidebar-link reco-side-_9-vue-的双向数据绑定原理是什么" data-v-92abcef6>9. Vue 的双向数据绑定原理是什么？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_10-如何动态更新对象或数组的值" class="sidebar-link reco-side-_10-如何动态更新对象或数组的值" data-v-92abcef6>10.如何动态更新对象或数组的值？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_11-常用的事件修饰符有哪些" class="sidebar-link reco-side-_11-常用的事件修饰符有哪些" data-v-92abcef6>11.常用的事件修饰符有哪些？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_12-vue-如何获取-dom-元素" class="sidebar-link reco-side-_12-vue-如何获取-dom-元素" data-v-92abcef6>12.Vue 如何获取 DOM 元素？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_13-v-on-如何绑定多个事件" class="sidebar-link reco-side-_13-v-on-如何绑定多个事件" data-v-92abcef6>13.v-on 如何绑定多个事件？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_14-vue-初始化页面闪动问题如何解决" class="sidebar-link reco-side-_14-vue-初始化页面闪动问题如何解决" data-v-92abcef6>14.Vue 初始化页面闪动问题如何解决？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_15-vue-如何清除浏览器缓存" class="sidebar-link reco-side-_15-vue-如何清除浏览器缓存" data-v-92abcef6>15.Vue 如何清除浏览器缓存？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_16-vue-router-路由有哪些模式" class="sidebar-link reco-side-_16-vue-router-路由有哪些模式" data-v-92abcef6>16.Vue-router 路由有哪些模式？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_18-vuex-是什么-有哪几种属性" class="sidebar-link reco-side-_18-vuex-是什么-有哪几种属性" data-v-92abcef6>18.Vuex 是什么？有哪几种属性？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_19-说一下v-model的原理" class="sidebar-link reco-side-_19-说一下v-model的原理" data-v-92abcef6>19.说一下v-model的原理</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_20-vue模版编译原理知道吗-能简单说一下吗" class="sidebar-link reco-side-_20-vue模版编译原理知道吗-能简单说一下吗" data-v-92abcef6>20.Vue模版编译原理知道吗，能简单说一下吗？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_21-vue中组件生命周期调用顺序" class="sidebar-link reco-side-_21-vue中组件生命周期调用顺序" data-v-92abcef6>21.Vue中组件生命周期调用顺序</a></li><li class="level-2" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#vue-router有哪几种导航钩子" class="sidebar-link reco-side-vue-router有哪几种导航钩子" data-v-92abcef6>vue-router有哪几种导航钩子？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_22-你都做过哪些vue的性能优化" class="sidebar-link reco-side-_22-你都做过哪些vue的性能优化" data-v-92abcef6>22.你都做过哪些Vue的性能优化</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_24-vue是如何收集依赖的" class="sidebar-link reco-side-_24-vue是如何收集依赖的" data-v-92abcef6>24.Vue是如何收集依赖的？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#watcher" class="sidebar-link reco-side-watcher" data-v-92abcef6>Watcher</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_25-对ssr的理解" class="sidebar-link reco-side-_25-对ssr的理解" data-v-92abcef6>25.对SSR的理解</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_26-keep-alive-中的生命周期哪些" class="sidebar-link reco-side-_26-keep-alive-中的生命周期哪些" data-v-92abcef6>26.keep-alive 中的生命周期哪些</a></li><li class="level-2" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#vue项目遇到的问题" class="sidebar-link reco-side-vue项目遇到的问题" data-v-92abcef6>vue项目遇到的问题</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_1-在开发过程中-如果你的-vue-程序和后端-api-服务器未在同一主机上运行-该如何代理-api-请求。假设使用-vue-cli-3-进行设置" class="sidebar-link reco-side-_1-在开发过程中-如果你的-vue-程序和后端-api-服务器未在同一主机上运行-该如何代理-api-请求。假设使用-vue-cli-3-进行设置" data-v-92abcef6>1 .在开发过程中，如果你的 Vue 程序和后端 API 服务器未在同一主机上运行，该如何代理 API 请求。假设使用 Vue-CLI 3 进行设置？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_2-prop-如何指定其类型要求" class="sidebar-link reco-side-_2-prop-如何指定其类型要求" data-v-92abcef6>2. prop 如何指定其类型要求？</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_26-组件通信" class="sidebar-link reco-side-_26-组件通信" data-v-92abcef6>26.组件通信</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#_1-props-emit" class="sidebar-link reco-side-_1-props-emit" data-v-92abcef6>（1） props  /   $emit</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#eventbus事件总线-emit-on" class="sidebar-link reco-side-eventbus事件总线-emit-on" data-v-92abcef6>eventBus事件总线（$emit / $on）</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#依赖注入-provide-inject" class="sidebar-link reco-side-依赖注入-provide-inject" data-v-92abcef6>依赖注入（provide / inject）</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#parent-children" class="sidebar-link reco-side-parent-children" data-v-92abcef6>$parent / $children</a></li><li class="level-3" data-v-92abcef6><a href="/blog_front/blogs/vue/2022/0303.html#attrs-listeners" class="sidebar-link reco-side-attrs-listeners" data-v-92abcef6>$attrs / $listeners</a></li></ul></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-a008c6ba data-v-a008c6ba><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-a008c6ba><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-a008c6ba></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-a008c6ba></path></svg></div></div></div>
    <script src="/blog_front/assets/js/app.f126fdc6.js" defer></script><script src="/blog_front/assets/js/3.ba154db2.js" defer></script><script src="/blog_front/assets/js/1.1f0d1f23.js" defer></script><script src="/blog_front/assets/js/22.86e9d97f.js" defer></script>
  </body>
</html>
